<script setup>
import { reactive } from 'vue';
import { useCurrentWatchStore } from '@T2/store/users.ts';
import { findMenuPath } from '@T2/utils/utils.ts';
import Department from './department.vue';
import Iuser from './iuser.vue';

const currentWatchStore = useCurrentWatchStore();
const { curMenus } = currentWatchStore;
const path = findMenuPath(curMenus, '/C/Manage/department');
const Rt = reactive({
  node: {},
  departmentTree: [],
  departmentIDList: [],
});
const departmentChange = (data, node) => {
  Rt.node = node;
}
const treeChange = (tree) => {
  Rt.departmentTree = tree;
}
const listChange = (list) => {
  Rt.departmentIDList = list.map(i => i.id);
}
</script>

<template>
  <div class="view flex">
    <div class="department">
      <Department @current-change="departmentChange" @list-change="listChange" @tree-change="treeChange" />
    </div>
    <div class="iuser-box">
      <Iuser
        v-if="Rt.node.id"
        :node="Rt.node"
        :departmentTree="Rt.departmentTree"
        :departmentIDList="Rt.departmentIDList"
      />
    </div>
  </div>
  
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
}
.department {
  width: fit-content;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
  margin-right: 0;
  z-index: 10;
}
.iuser-box {
  flex: 1;
  overflow: hidden;
  position: relative;
}
</style>